// 选择器都以$()来选择。

// 元素选择器
let p = $("p");

// id选择器
let id_dom =  $("#id_name");

//class选择器
let class_dom = $(".class_name");

// 选择所有元素
$("*");

// 选择自身
$(this);

// 单击事件
$("#one").click(function(){
    // 接受一个函数作为相应的click事件操作
});

// 双击事件
$("#two").dblclick(function(){
   // 接受一个函数作为相应的dblclick事件操作
});

// 一些鼠标事件,使用方法都差不多
mouseenter(function(){})
mouseleave(function(){})
mousedown(function(){})
mouseup(function(){})

// 悬停事件
hover(
    function(){/*进入触发事件*/},
    function(){/*离开触发事件*/}
)

// 焦点事件
focus(function(){
    // 获得焦点触发的事件
})
blur(function(){
    // 失去焦点
})

// 键盘事件
keydown(function(event){
    /*
    按下一个键
    对接受的事件event进行处理
    */
})
keyup(function(event){
    /*
    松开一个键
    对接受的事件event进行处理
    */ 
})
keypress(data_name,function(event){
    /*
    按下一个键，并产生一个字符ASCII码返回
    接收一个ASCII码数据范围(比如65-90,大写字母)
    data_name = {start:65,end:90}
    可以通过event.data 获取传入的数据再进行操作
    */ 
    event.which //获取ASCII码
})

// 显示隐藏方法
/*
包含指定状态切换的速度也就是显示的速度[slow,fast,毫秒数值]
指定缓动函数：linear/swing
callback是执行完成之后的函数调用
*/
hide(speed,'指定缓动函数',callback);
show(speed,,'指定缓动函数',callback);

// 我们不必单独为一个元素指定显示还是隐藏，
// 可以使用以下函数进行显示和隐藏的切换
toggle(speed,callback)

// 淡入淡出
/*
包含指定状态切换的速度也就是显示的速度[slow,fast,normal,毫秒数值]
callback是执行完成100%之后的函数调用
*/
// 淡入隐藏的元素
fadeIn(speed,callback)
// 淡出可见元素
fadeOut(speed,callback)
// 切换In和Out状态
fadeToggle(speed,callback)
// 渐变为指定的透明度参考css属性[0-1]之间
fadeTo(speed,opacity,callback)

// 滑动效果类似上面
slideDown(speed,callback)
slideUp(speed,callback)
slideToggle(speed,callback)

// 自定义动画效果
// {params}指定一些动画的css属性
// 对位置进程操作需要指定元素的position,脱离原本的静态文档流。
$(selector).animate({params},speed,callback);

// 停止动画
/*stopAll:默认false，清除动画队列
goToEnd：默认false，立即完成当前没完成的动画
*/
stop(stopAll,goToEnd)

$("#id_name").fadeIn().fadeOut()......

// 元素文本内容
text()
// HTML结构
html()
// 表单元素的值
val()
// 获取标签属性
attr()
prop()

let name = "霁";
let html_text = `<strong>我的名字：${name}</strong>`;
// 为id1的元素设置html文本
$("#id1").html(html_text);
// 接受回调函数
$("#id1").html(funtion(i,old_text){
     return `Old is ${origText} New is new_text index is:${i}`;
});

// 结尾追加
append()
// 开头追加
prepend()
// 元素之后插入
after()
// 元素之前插入
before()

// 删除被选择的元素和它的子元素
remove(...)
// 删除子元素
empty(...)
// 都可以指定过滤的元素
// 比如删除指定的class为ul—li的<li>
$(ul).remove(".ul-li");

// 添加一个或多个类名
// 类似原生的classList.add()
addClass("...");
// 移除一个或多个类名
removeClass("...");
// 切换类，没有就添加，有就移除
toggleClass("...");
// 设置或者返回css属性
css("属性","要指定的值")

// 列举
// 不包含内外边距和边框
width()
height()

// 包括内边距
innerWidth()
innerHeight()

// 包括 内边距和边框
// 可指定true参数返回包括外边距的宽度
outerWidth()
outerHeight()